<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute()
const activities = [
    {
        content: '下单',
        time: '2018-04-12 20:46',
        people: '张三',
        done: true,
    },
    {
        content: '支付',
        people: '吉吉国王',
        done: false,
        time: '2018-04-03 20:46',
    },
    {
        content: '发起退款',
        done: false,
        people: '熊大',
        time: '2018-04-03 20:46',
    },
    {
        content: '退款到账',
        people: '',
        done: false,
        time: '',
    },
]
const goBack = () => {
    window.history.go(-1)
}
</script>

<template>
    <div>
        <div class="header">
            <div class="fh-box" @click="goBack">
                <img src="https://epdb.obs.cn-east-3.myhuaweicloud.com/resource/website/yytbg/fanhuisy.png" alt="">
                <span>返回</span>
            </div>
            <h2>
                {{ route.query.orderType ? '订单详情' : '退款详情' }}
            </h2>
            <p></p>
        </div>
        <div class="content">
            <div class="order-detail">
                <el-card style="margin-top:10px;">
                    <h1>订单编号：234231029431</h1>
                    <div class="order-content">
                        <p>下单人：张三</p>
                        <p>订购产品：综合评价模板</p>
                        <p>创建时间：2017-01-10</p>
                        <p>订单类型：综合评价精美册</p>
                        <p>状态：待支付</p>
                        <p>订单金额：￥1000</p>
                    </div>
                </el-card>
                <el-card style="margin-top:10px;">
                    <template #header>
                        <div class="card-header">
                            <span>订单状态</span>
                        </div>
                    </template>
                    <div class="timelineProcessBox">
                        <el-timeline class="timeline">
                            <el-timeline-item class="lineitem" :class="activity.done ? 'active' : 'inactive'"
                                v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
                                <span style="display: flex; flex-direction: column">
                                    <span style="margin: 10px 0; font-size: 16px">
                                        {{ activity.content }}
                                    </span>
                                    <span style="color: #8c8c8c; font-size: 14px">
                                        {{ activity.people }}
                                    </span>
                                </span>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-card>
                <el-card style="margin-top:10px;" v-if="!route.query.orderType">
                    <template #header>
                        <div class="card-header">
                            <span>退款信息</span>
                        </div>
                    </template>
                    <div class="order-content">
                        <p>退款原因：张三</p>
                        <p>退款方式：综合评价模板</p>
                        <p>退款类型：2017-01-10</p>
                        <p>退款金额：综合评价精美册</p>
                        <p>退款状态：待支付</p>
                    </div>
                </el-card>
                <el-card style="margin-top:10px;">
                    <template #header>
                        <div class="card-header">
                            <span>用户信息</span>
                        </div>
                    </template>
                    <div class="order-content">
                        <p>用户姓名：张三</p>
                        <p>联系电话：综合评价模板</p>
                        <p>地址：2017-01-10</p>
                    </div>
                </el-card>
                <el-card style="margin-top:10px;">
                    <template #header>
                        <div class="card-header">
                            <span>商品信息</span>
                        </div>
                    </template>
                    <div class="order-content">
                        <p>商品名称：张三</p>
                        <p>商品类型：综合评价模板</p>
                        <p>商品规格：2017-01-10</p>
                        <p>商品图片：综合评价精美册</p>
                        <p>商品金额：待支付</p>
                    </div>
                </el-card>
                <el-card style="margin-top:10px;">
                    <template #header>
                        <div class="card-header">
                            <span>物流信息</span>
                        </div>
                    </template>
                    <h1>物流单号：234231029431</h1>
                    <div class="order-content">
                        <p>发货人：张三</p>
                        <p>联系电话：综合评价模板</p>
                        <p>发货地址：2017-01-10</p>
                        <p>收货人：综合评价精美册</p>
                        <p>联系电话：待支付</p>
                        <p>收获地址：￥1000</p>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.order-detail {
    height: calc(100vh - 140px);
    padding-bottom: 100px;
    overflow-y: auto;

    .timelineProcessBox {
        padding-bottom:100px;
        .timeline {
            display: flex;
            width: 100%;
            margin: 10px auto;

            .lineitem {
                transform: translateX(50%);
                width: 25%;
            }
        }

        :deep(.el-timeline-item__tail) {
            border-left: none;
            border-top: 2px solid #e4e7ed;
            width: 100%;
            position: absolute;
            top: 6px;
        }

        :deep(.el-timeline-item__wrapper) {
            padding-left: 0;
            position: absolute;
            top: 20px;
            transform: translateX(-50%);
            text-align: center;
        }

        :deep(.el-timeline-item__timestamp) {
            font-size: 14px;
        }

        .active {
            :deep(.el-timeline-item__node) {
                background-color: green;
            }

            :deep(.el-timeline-item__tail) {
                border-color:green;
            }
        }
        .active+li {
            :deep(.el-timeline-item__node) {
                background-color: green;
            }
        }
    }

    .order-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        p {
            width: 30%;
            padding-left: 20px;
        }
    }
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background: #F9FAFF;
    border-radius: 20px 20px 20px 20px;
    opacity: 1;
    line-height: 50px;

    .fh-box {
        width: 73px;
        height: 40px;
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }
    }

    p {
        padding-right: 10px;
    }
}
</style>
